<template>
	<view class="content">
		<div class="search-box">
			<uni-search-bar :radius="100" @input="searchInput" @confirm="search" placeholder="搜索玩家"></uni-search-bar>
		</div>
		<view class="banner-box">
			<uniSwiperDot :info="[0,1,2,3]" mode="round" :dotsStyles="dotsStyles" :current="bannerCurrent" class="uni-swiper-box">
				<swiper autoplay circular :interval="3000" @change="bannerChange" class="swiper-box">
					<swiper-item class="swiper-item">
						<image mode="aspectFit" class="img" src="/static/index/banner.png"></image>
					</swiper-item>
					<swiper-item class="swiper-item">
						<image mode="aspectFit" class="img" src="/static/index/banner.png"></image>
					</swiper-item>
					<swiper-item class="swiper-item">
						<image mode="aspectFit" class="img" src="/static/index/banner.png"></image>
					</swiper-item>
					<swiper-item class="swiper-item">
						<image mode="aspectFit" class="img" src="/static/index/banner.png"></image>
					</swiper-item>
				</swiper>
			</uniSwiperDot>
		</view>
		<div class="notice-box">
			<uni-notice-bar showIcon="true" 
			text="[公告] 欢迎来到Wetcland服务器移动端站点"></uni-notice-bar>
		</div>
		<div class="main-box">
			<both-title leftTit="玩家节操币排行榜" rightTit="TOP10"></both-title>
			<div class="integritycoin-player-top10">
				<uni-list>
				    <uni-list-item title="Wetcland" note="玩家描述信息" thumb="https://img-blog.csdnimg.cn/20201014180756780.png?x-oss-process=image/resize,m_fixed,h_64,w_64"
				     thumb-size="lg" rightText="排名1"></uni-list-item>
				</uni-list>
			</div>
			<both-title leftTit="玩家金币排行榜" rightTit="TOP20"></both-title>
			<div class="goldcoin-player-top10">
				<uni-list v-for="(v, i) in coinRanking" :key="i">
				    <uni-list-item :title="v.player" :note="v.balance + ' 金币'" :thumb="coinAvatars[i] || '/static/head.png'"
				     thumb-size="lg" :rightText="'排名' + v.rank"></uni-list-item>
				</uni-list>
			</div>
		</div>
	</view>
</template>

<script>
	import {uniSearchBar} from '@dcloudio/uni-ui'
	import {uniSwiperDot} from '@dcloudio/uni-ui'
	import {uniNoticeBar} from '@dcloudio/uni-ui'
	import {uniList} from '@dcloudio/uni-ui'
	import {uniListItem} from '@dcloudio/uni-ui'
	import BothTitle from '../../component/BothTitle.vue'
	import ajax from '../../Ajax/index.js'
	export default {
		components: {
			uniSearchBar,
			uniSwiperDot,
			BothTitle,
			uniNoticeBar,
			uniList,
			uniListItem
		},
		data() {
			return {
				dotsStyles: {
					backgroundColor: '#fff',
					border: 'none',
					selectedBackgroundColor: '#58AEE4',
					selectedBorder: 'none',
					bottom: '6',
					width: '8'
				},
				bannerCurrent: 0,
				coinRanking: [],
				coinAvatars: [],
				searchKeyword: ''
			}
		},
		mounted() {
			this.getCoinRanking()
		},
		methods: {
			search() {
				if(this.searchKeyword == '') {
					uni.showToast({title: '请输入搜索内容', icon: 'none'})
					this.searchKeyword = ''
					return
				}
				uni.navigateTo({
					url: 'Main/ShowSearchContent?searchKeyword=' + this.searchKeyword
				})
				this.searchKeyword = ''
			},
			InputBlur() {
				console.log("搜索栏失去焦点");
			},
			searchInput(e) {
				this.searchKeyword = e.value
			},
			bannerChange(e) {
				this.bannerCurrent = e.detail.current;
			},
			getMcrmbRanking() {
			
			},
			getCoinRanking() {
				ajax.post('coin/getCoinRanking').then(res => {
					if (res.data.code == 200) {
						res.data.list.map((v, i) => {
							v.rank = i + 1
							this.coinRanking.push(v)
						})
						this.coinAvatars = res.data.avatars
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.content {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		.search-box {
			width: 100%;
			height: 100%;
		}
		.notice-box {
			width: 96%;
			margin-top: 20rpx;
		}
		.banner-box {
			width: 96%;
			height: 280rpx;
			.uni-swiper-box {
				width: 100%;
				height: 100%;
				border-radius: 25rpx;
				.swiper-item {
					width: 100%;
					height: 100%;
					.img {
						width: 100%;
						height: 100%;
					}
				}
			}
		}
		.main-box {
			width: 96%;
			.goldcoin-player-top10 {
				
			}
			.integritycoin-player-top10 {
				
			}
			.recharge-player-top10 {
				
			}
		}
	}
</style>
